@import '../../ui/base';

$input
  -webkit-appearance none
  outline none
  border none
  padding 0
  margin 0
  height 25px
  &[disabled]
    opacity .7
  &:focus
    outline none

$input-normal
  @extends $input
  padding-left 5px
  height 30px
  border 1px solid #e3e3e3

.nav-title
  color #8fa6bf
  z-index 1
  position absolute
  top -29px

.nav
  display inline-block
  user-select none
  clear fix
  height 36px
  background-color #fff
  box-shadow 0px 0px 6px rgba(0, 0, 0, .2)
  position relative
  a:hover
    opacity 1
  > *
    float left

.nav > li > span
  cursor default

.nav > li > a
.nav > li > span
.ancestor a
  position relative
  line-height 36px
  display block
  padding 0 20px
  color #8fa6bf

.nav > li.team-user > span
  color #fff
  padding 0

.children a > span,
.team-memebers a > span
  display flex
  align-items center
  > span
    margin-left 10px

.ancestor
  li
    .has-children.active
      i
        border-top-color #fff
  li
    display flex
    .has-children
      position relative
      i
        @extends $fade-in
        width 0
        height 0
        border-style solid
        border-width 4px 4px 0 4px
        border-color #000 transparent transparent transparent;
        position absolute
        right 6px
        top 16px

.team-user
  padding 0 20px
  line-height 36px
  > i
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    right: 6px;
    top: 16px;
  ul
    position absolute
    width 180px
    top 100%
    left 20px
    background-color #fff
    padding 5px 0
    z-index 10
    box-shadow 0px 1px 6px rgba(0,0,0,.2)
    max-height 495px
    overflow-y auto
    li
      line-height 1.62
      &:hover
        background-color #e2ebf4
    a
      &:hover
        opacity 1
      > span
        display flex
        align-items center
        > span
          margin-left 10px
      display block
      font-size 13px
      padding 8px 14px
      color #333

.team-memebers
.children
  position relative
  &::after
    content ''
    width 0
    height 0
    border-style solid
    border-width 4px 4px 0 4px
    border-color #000 transparent transparent transparent
    position absolute
    right 6px
    top 16px

  ul
    position absolute
    width 180px
    top 100%
    left 0
    background-color #fff
    padding 5px 0
    z-index 10
    box-shadow 0px 1px 6px rgba(0,0,0,.2)
    li
      &:hover
        background-color #e2ebf4
    a
      display block
      font-size 13px
      padding 8px 14px
      color #333

.children
  ul
    left 32px

.team-memebers
  padding-right 10px
  &::after
    right 17px
  ul
    left 20px

.more-tab
.team-user
.nav > li > a
.ancestor a
  position relative
  &:hover
    opacity 1
  &::before
    transition border-color .2s
    content ''
    width 0
    height 0
    border-style solid
    border-width 18px 0 18px 8px
    border-color transparent transparent transparent rgba(0,0,0,.1)
    position absolute
    right -9px
    top 0
    z-index 10
  &::after
    transition border-color .2s
    content ''
    width 0
    height 0
    border-style solid
    border-width 18px 0 18px 8px
    border-color transparent transparent transparent #fff
    position absolute
    right -8px
    top 0
    z-index 10

.nav > li.children > span
  padding-left 32px
.nav > li.team-memebers > span
  padding-left 22px

.nav > li > span
  padding 0 20px

.team-user
.ancestor a.active
.nav > li > a.active
  /*padding-left 30px*/
  &::before
    display none
  &::after
    border-color transparent transparent transparent #42a8fd
    z-index 9

.team-user
  background-color #42a8fd
  &::before
    display block
    content ''
    width 0
    height 0
    border-style solid
    border-width 18px 0 18px 8px
    border-color transparent transparent transparent #fff
    position absolute
    left 0
    top 0
    z-index 9

.ancestor a span,
.team-user span span
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;

.nav
  .active
    background-color #42a8fd
    color #fff

.objective
  margin-top 60px

.objective-total
  border 1px solid #e7e9ec
  transition box-shadow .2s
  .progress-info-wrapper
    @extends $fade-in
  > div
    background-color #fff
    height 75px
    &:first-child
      justify-content space-between
    padding 0 35px
    display flex
    align-items center
    flex 1
    position relative
    & + div
      border-top 1px solid #eef2f6
    h2
      font-size 30px
      span
        display inline-block
        @extends $slide-in-right
  &:hover
    box-shadow 0 0 18px rgba(0,0,0,.1)
  .progress-info
    display flex
    align-items center
    justify-content space-between
    flex 1
    > div
      display flex
      align-items center
      > label
        background-color #e3ebf5
        color #8b919c
        padding 0 7px
        font-size 12px
  .total-progress
    margin 0 15px
  .total-type-1 > span > span
      background-color: #f00
  .total-type-2 > span > span
      background-color: #f1c902
  .total-type-3 > span > span
      background-color: #2dd204


.objective-list
  margin-top 30px
  position relative

.total-actions
  display flex
  align-items center
  position relative

.objective-create-modal
  width 660px

// 创建周期
// 删除周期
.action-list
  width 174px
  background-color #fff
  box-shadow 0px 1px 6px rgba(0,0,0,0.2)
  right 0
  z-index 12
  padding 10px 0
  li
    padding-left 20px
  li:hover
    background-color #f3f6f9
  .delete-period
    color $red
  span
    width 100%
    display inline-block
    height 30px
    line-height 30px
    font-size 13px

.search
  position relative
  label
    position absolute
    top -29px
    color #8fa6bf
  .icon-input
    position relative
    > i
      color #8fa6bf
      position absolute
      top 50%
      margin-top -7px
      left 10px
  input
    @extends $input-normal
    height 36px
    width 250px
    padding-left 32px
    background-color #f9fafb
    transition background-color .2s
    &:focus
      background-color #fff

.nav-bar
  display flex
  justify-content space-between
  align-items center
  margin-top 16px
  > div
    height 36px

.label-select
  display flex
  align-items center
  label
    margin-right 15px
  & + .label-select
    margin-top 20px

.filter-from-team
  > *
    margin-left 10px
  button
  .check
    font-size 12px
  button
    height 24px
    width 64px
    padding 0
    color #7793b2
    &:hover
      color #7793b2

.recent-check-objective
  min-height 40px
  a
    display flex
    flex 1
    justify-content space-between
    .title
      font-size 12px
      color #8fa6bf
      margin-right 20px
    .user-span
      display flex
      flex 1
      align-items center
      justify-content space-between
    .user-span > span:first-child,
    .team-span
      display flex
      align-items center
      span
        margin-left 10px

.loading-recent
  margin-top 15px
  margin-left 20px


.objective-null
  display flex
  justify-content center
  flex-direction column
  align-items center
  margin-top 30px
  background-color #fff
  padding 40px 0
  border 1px solid #e7e9ec
  @extends $slide-in-down
  &.has-btn
    padding-bottom 89px

.more-ancestor
  position: absolute
  width: 180px
  top: 100%
  margin-top -1px
  left: 20px
  background-color: #fff
  padding: 5px 0
  z-index: 10
  box-shadow: 0px 1px 6px rgba(0,0,0,0.2)
  display none
  li
    &:hover
      background-color #e2ebf4
  a
    display inline-block
    width 100%
    text-align left
    &::before
    &::after
      display none

.ancestor > li
  position relative


.more-tab
  width 50px
  line-height 36px
  cursor pointer
  position relative
  text-align center
  > span
    vertical-align middle
    color #8fa6bf
  &:hover
    > ul
      display block

.update-note-modal
  width 660px
  [data-role="dialog-body"]
    padding 0
  .input-block
    padding 20px 25px

.objective-period
  width 160px

.other-team-children
  position absolute
  top 100%
  left 20px
  box-shadow 0px 1px 6px rgba(0,0,0,.2)
  width: 180px
  z-index 10
  background-color #fff
  padding 5px 0
  li
    &:hover
      background-color #e2ebf4
  a
    width 100%
    display block
    font-size 13px
    padding 8px 14px
    color #333
    line-height 1.62
    &::before
    &::after
      display none

.org-other-team-children
  left 0

.org-nav
  position relative
  i
    width 0
    height 0
    border-style solid
    border-width 4px 4px 0 4px
    border-color #000 transparent transparent transparent;
    position absolute
    right 6px
    top 16px

.delete-area[data-role="dialog-body"]
  word-break normal !important
  width 450px
  padding 20px 30px
  p
    line-height 1.7
    span
      color #EE5367
  input
    width 100%
    line-height 30px
    border-radius 3px
    border 1px solid #ddd
    margin-top 15px
    padding 0 10px
.delete-msg
  height 15px
  line-height 15px
  color red
  font-size 12px
  margin-top 5px

.pick-file
  background-color #F3F6F9
  box-sizing border-box
  height 45px
  width 100%
  display flex
  justify-content center
  align-items center
  margin-left 5px
  font-size 14px
  color #3D98DF 
  border 1px solid #00a0f6;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1)
  border-radius 3px;

@import './style.objective.ie.styl';
